<template>
  <div >
  <Dropdown  trigger="click" @on-click="userSetting" style="position: fixed;right:30px;top:10px;z-index:1100;">
    <Avatar size="large" src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
    <DropdownMenu slot="list">
        <DropdownItem name="/manager/setting/userInfo">账号设置</DropdownItem>
        <DropdownItem divided name="/system/login">退出</DropdownItem>
    </DropdownMenu>
  </Dropdown>
    <div class="layout">
      <Layout>
        <Header :style="{position: 'fixed', width: '100%',zIndex:'1000'}">
          <Menu mode="horizontal" @on-select="menuRedirect" theme="dark" active-name="">
            <div class="layout-logo"></div>

            <div class="layout-nav">
              <MenuItem name="/manager/my">
                <Icon type="ios-home"></Icon>
                我的
              </MenuItem>
              <MenuItem name="/manager">
                <Icon type="ios-home"></Icon>
                项目
              </MenuItem>

              <MenuItem name="/manager/calendar">
                <Icon type="ios-keypad"></Icon>
                日志
              </MenuItem>
            </div>
          </Menu>
        </Header>
        <Content :style="{margin: '60px 0 0',height:'calc(100vh - 90px)',background:'#F1F1F1'}">
          <router-view/>
        </Content>
        <Footer class="layout-footer-center">2018 &copy; Immense</Footer>
      </Layout>
    </div>

  </div>
</template>
<script>

export default {
  data (){
    return {
    }
  },
  methods: {
    menuRedirect(name) {
      this.$router.push({
        path: name
      })
    },
    userSetting(name) {
      this.$router.push({
        path: name
      })
    }
  }
}
</script>

<style scoped>
.layout{
  background: white;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.ivu-layout{
  background-color: white;
}
.layout-logo{
  width: 400px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 20px;
  left: 20px;
}
.layout-nav{
  width: 300px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
    border-top:1px solid #DEDEDE;
}
.ivu-layout-footer{
  padding: 2px 50px;
}
.layout-logo{background: url(/static/images/immenselogo.png) no-repeat;background-size: contain;}
.layout-logo-text{
  color: #5ebeaa;
  font-size: 16px;
  margin: 3px 0 0 130px;
  padding: 2px;
  font-weight: 700;
}


</style>
